<style>
  .c{
    background-color: gold;
  }
</style>
<template>
  <div>
    <div>
      <Row>
        <Col span="4">
        <search-name :tableType="tableTypeUrl"></search-name>
        </Col>
        <Col span="1"><Button type="success" @click="search(searchName)">查询</Button></Col>
      </Row>
    </div>
    <Table :data="gsInfoTableData" :columns="gsInfoData" stripe ></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <!--设置total数据总条数,通过数据库获取然后绑定total-->
        <!--current当前页-->
        <Page :total="100" :current="1" @on-change="changePage"></Page>
      </div>
    </div>
  </div>
</template>
<script>
  import searchName from '@/components/search'
  import store from '@/store'
  import { mapActions } from 'vuex'
  export default {
    data () {
      return {
        //传递公司工商信息id
        gsInfoId:'',
        tableTypeUrl:'url',
        //循环出的表格每行数据
        //tableData1: this.mockTableData1(),
        /*formData:{
         //公司名称
         companyName:'',
         //公司成立时间
         companyBirthday:'',
         //社会统一信用代码
         creditCode:'',
         //注册地址
         registerAddress:'',
         //注册地址数据
         registerAddressData:'',
         //内外资
         neiwaizi:'',
         //内外资数据
         neiwaiziData:[
         {
         value: 'neizi',
         label: '内资'
         },
         {
         value: 'waizi',
         label: '外资'
         },
         {
         value: 'guoqi',
         label: '国企'
         }
         ],
         //经营范围
         managementRange:'',
         //企业性质
         enterpriseNature:'',
         //企业性质数据
         enterpriseNaturedata:[
         {
         value: 'gongsi',
         label: '公司'
         },
         {
         value: 'geti',
         label: '个体'
         },
         {
         value: 'minbanfei',
         label: '民办非'
         }
         ],
         //注册资本
         registeredCapital:'',
         //法人代表姓名
         legalPersonName:'',
         //法人代表ID：身份证
         legalPersonId:'',
         //银行名称
         bankName:'',
         //银行卡号
         bankIdCard:'',
         //股东信息
         gudong: [
         {
         n: '股东' + 1,
         name:'xj',
         c: 22
         },
         {
         n: '股东' +2,
         name:'lsq',
         c: 33
         },
         {
         n: '股东' + 3,
         name:'lrb',
         c: 45
         }
         ],
         //证照信息
         portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],
         //时间
         time: Math.floor(Math.random () * 7 + 1),
         },*/
        //表头数据
        gsInfoData: [
          {
            title: '编号',
            key: 'enterpriseId'
          },{
            title:'公司名称',
            key:'name'
          },{
            title: '国税',
            key: 'foundTime'
          },{
            title: '报税类型',
            key: 'creditCode'
          },{
            title: '流转税',
            key: 'registerAddress'
          },{
            title: '所得税',
            key: 'type'
          },{
            title: '财产税',
            key: 'mainBusiness'
          },{
            title: '行为税',
            key: 'nature'
          },{
            title: '税金及附加',
            key: 'registeredCaptial'
          },{
            title: '增值税',
            key: 'artificialPerson'
          },{
            title:'企业所得税',
            key:'artificialPersonIdcard'
          },{
            title:'征税机关(国税)',
            key:'bankName'
          },{
            title:'征税机关(地税)',
            key:'bankAccout'
          },
          /*{
           title: '圆点',
           key: 'status',
           render: (h, params) => {
           const row = params.row;
           const color = row.status === 1 ? 'blue' : row.status === 2 ? 'green' : 'red';
           const text = row.status === 1 ? '构建中' : row.status === 2 ? '构建完成' : '构建失败';
           return h('Tag', {
           props: {
           type: 'dot',
           color: color
           }
           }, text);
           }
           },*/
          /*{
           title: '证件内容',
           key: 'portrayal',
           render: (h, params) => {
           return h('Poptip', {
           props: {
           trigger: 'hover',
           title: params.row.portrayal.length + '个证件',
           placement: 'bottom'
           }
           }, [
           h('Tag', params.row.portrayal.length),
           h('div', {
           slot: 'content'
           }, [
           h('ul', this.gsInfoTableData[params.index].portrayal.map(item => {
           return h('li', {
           style: {
           textAlign: 'center',
           padding: '4px'
           }
           }, item)
           }))
           ])
           ]);
           }
           },*/
          {
            title: '股东',
            key: 'stockholder',
            render: (h, params) => {
              console.log(params);
              return h('Poptip', {
                props: {
                  //移上去在下方出现
                  trigger: 'hover',
                  title: params.row.stockholders.length + '个股东',
                  placement: 'bottom'
                }
              }, [
                h('Tag', params.row.stockholders.length),
                h('div', {
                  slot: 'content'
                }, [
                  //map相当于forEach循环遍历
                  h('ul', this.gsInfoTableData[params.index].stockholders.map(function(item){
                    //在绑定的表格数据中添加ul这个标签，并且将数据写在上面
                    //item:代表每一个股东对象
                    //console.log(item);
                    return h('li', {
                      style: {
                        textAlign: 'left',
                        padding: '4px'
                      }
                    },  '姓名：'+item.name+'占比：' + item.percent + '%')
                  }))
                ])
              ]);
            }
          },
          /*{
           title: '取样时段',
           key: 'time',
           render: (h, params) => {
           return h('div', '近' + params.row.time + '天');
           }
           },*/
          /*{
           title: '时间',
           key: 'update',
           render: (h, params) => {
           return h('div', this.formatDate(this.gsInfoTableData[params.index].update));
           }
           },*/{
            title:'操作',
            render: (h,params)=> {
              var that = this;
              return h('div',[
                h('div',{
                  style:{
                    display:'inline',
                  },
                  props:{

                  },
                  on:{
                    click:()=> {
                      console.log('点击了修改');
                      //传递当前点击的公司id
                      var id = params.row.enterpriseId
                      //var index = params.index;
                      //this.editCompany(id);
                      this.saveGsInfoId(id);
                      //跳转
                      setTimeout(()=>{
                        that.$router.push({
                          name:'gsInfo'
                        });
                      })
                    }
                  }
                },[
                  h('Icon',{
                    props:{
                      type:'edit'
                    },
                    style:{
                      display:'inline-block',
                      fontSize:'18px',
                    }
                  })
                ]),
                h('div',{
                  style:{
                    display:'inline'
                  },
                  on:{
                    click:()=>{
                      //获取到当前行
                      //console.log('删除当前行'+(params.index+1));
                      //console.log(this.row.enterpriseId);
                      var index = params.index;
                      var id = params.row.enterpriseId;
                      this.removeCompany(index,id);
                    }
                  }
                },[
                  h('Icon',{
                    props:{
                      type:'android-delete'
                    },
                    style:{
                      display:'inline-block',
                      fontSize:'18px',
                      marginLeft:'5px'
                    }
                  })
                ])
              ],)
            }
          }
        ],
        //手动模拟数据
        gsInfoTableData:[
          /*{gsId:'1',companyName:'中铁十三局',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
           {gsId:'2',companyName:'中国',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
           {gsId:'3',companyName:'美国',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
           {gsId:'4',companyName:'阿尔及利亚',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
           {gsId:'5',companyName:'巴基斯坦',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
           {gsId:'6',companyName:'哈萨克斯坦',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
           {gsId:'7',companyName:'战斗名族',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
           {gsId:'8',companyName:'战斗名族',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
           {gsId:'9',companyName:'战斗名族',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
           {gsId:'10',companyName:'中华名族',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},*/
        ]
      }
    },
    store,
    methods: {
      /*mockTableData1 () {
       let data = [];
       //循环push十条随机数据
       for (let i = 0; i < 10; i++) {
       data.push({
       name: '商圈' + Math.floor(Math.random () * 100 + 1),
       status: Math.floor(Math.random () * 3 + 1),
       portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],
       //股东信息
       gudong: [
       {
       n: '股东' + 1,
       name:'xj',
       c: 22
       },
       {
       n: '股东' +2,
       name:'lsq',
       c: 33
       },
       {
       n: '股东' + 3,
       name:'lrb',
       c: 45
       }
       ],
       time: Math.floor(Math.random () * 7 + 1),
       update: new Date()
       })
       }
       return data;
       },*/
      //传值测试
      transmitTest(){
        this.$emit('showState','我是传递的id');//触发事件
      },
      ...mapActions({
        // 在input 的blur 事件中触发回调，并将输入值作为参数返回到store中
        saveGsInfoId: 'saveGsInfoId'
      }),
      //调用分页表格的公共方法
      requestPage(pageNumber){
        //this固定
        var that = this;
        //请求分页信息
        var page = {
          "pageNumber": pageNumber,
          "pageSize": 10
        }
        this.$http.post('http://47.93.3.65:8081/api/enterprises',page).then((res)=>{
          //处理注册地址，成立时间，股东
          var item = res.data.data.list;
          console.log(item);
          for(var i = 0;i<item.length;i++){
            //之前提交的有空值，需要判断
            //console.log(item[i]);
            if(item[i].registerAddress!=undefined){
              item[i].registerAddress = eval(item[i].registerAddress).join('');
            }
          }
          //console.log('其他列表请求成功');
          //赋值
          this.gsInfoTableData = res.data.data.list;
          //console.log(this.gsInfoTableData);
          //console.log('成功');
        }).catch((err)=>{
          console.log(err);
        })
      },
      requestStockholder(item,id){
        //获取公司股东列表
        var stockholderUrl = 'http://47.93.3.65:8081/api/enterprise/'+id+'/stockholder';
        this.$http.post(stockholderUrl).then(function (res) {
          //res.data.data是一个股东数组
          //console.log(res.data.data);
          //item：每行的数据
          //console.log(item);
          //现在需要将股东假如每一行数据的属性中
          item.stockholder = res.data.data.length;
          //console.log(item.stockholder);
          //console.log(item);
        }).catch(function (error) {
          console.log('股东提交失败');
        })
      },
      //编辑方法
      editCompany(id){
        console.log('你想编辑编号'+id);
        this.saveGsInfoId(id);
      },
      //删除方法
      removeCompany(index,id){
        console.log('你当前想删除id：'+id+'的数据');
        console.log('位于当前页的第'+index+'个');
        //前端删除
        this.gsInfoTableData.splice(index, 1);
        //后端删除
        var url = 'http://47.93.3.65:8081/api/enterprise/'+id
        this.$http.delete(url).then((res)=>{
          console.log(res);
        }).catch((err)=>{
          console.log(err);
        });

      },
      //获取时间
      formatDate (date) {
        const y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + m + '-' + d;
      },
      //点击分页的时候触发事件
      changePage (page) {
        // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
        //this.tableData1 = this.mockTableData1();
        //page:当前页
        var that = this;
        console.log('点击了第'+page+'页');
        this.requestPage(page)
        /*var pageNum = {
         "pageNumber": page,
         "pageSize": 10
         }
         //请求分页数据
         this.$http.post('http://47.93.3.65:8081/api/enterprises',pageNum).then((res)=>{
         //处理注册地址，成立时间，内外资，企业性质，股东
         var item = res.data.data.list;
         for(var i = 0;i<item.length;i++){
         item[i].registerAddress = eval(item[i].registerAddress).join('');
         }
         //赋值
         that.gsInfoTableData = res.data.data.list;
         //console.log(that.gsInfoTableData);
         }).catch((err)=>{
         console.log(err);
         })*/
      },
      //查询事件
      search(searchName){
        console.log('now查询:'+this.searchName);
        let sea = this.searchName;
        //将searchName与绑定数据gsInfoTableData中的公司名称进行匹配，循环
        for(var i=0;i<this.gsInfoTableData.length;i++){
          //定义一个count_index数组,保存和搜索字段相同的数据的index
          const count_index = [];
          if(this.gsInfoTableData[i].companyName.indexOf(sea)>=0){
            //如果公司名称中包含有搜索关键字,在count_index中就要在末尾压入一个i，记录他是第几行
            count_index.push(i);
          }
          for(var j =0;j<count_index.length;j++){
            //循环取出行的index
            console.log(count_index[j]);
          }
          //输出匹配的所有名字
          //console.log(this.gsInfoTableData[i].companyName);
        }
        //如果成功就定位
        //不成功就不动
        //从缓存中读取数据
        //发送get请求
        //得到json数据,将id放在一个隐藏项中作为id,以备删除和修改的时候好读取
        //循环放在表中
      }
    },
    mounted(){
      //挂载完成，也就是模板中的html渲染到了html页面中，此时一般可以做一些ajax操作，这个函数只会执行一次
      //获取全部数据
      //console.log('表格页面:'+this.$route.params.searchName);
      //console.log('这是mounted');
      /*var that = this;
       var tableDefault = {
       "pageNumber": 1,
       "pageSize": 10
       }
       this.$http.post('http://47.93.3.65:8081/api/enterprises',tableDefault).then((res)=>{
       //console.log(res.data.data.list);
       that.gsInfoTableData = res.data.data.list;
       console.log(that.gsInfoTableData);
       }).catch((err)=>{
       console.log(err);
       });*/
      this.requestPage(1);
    },
    beforeMount(){
      //开始执行beforeMount挂载钩子，此时还没有生产html页面
      console.log('这是beforeMount')
    },
    //更新之前的事件钩子函数
    beforeUpdate(){},
    //更新完成后的钩子函数
    updated(){},
    components:{
      searchName
    }
  }
</script>
